<template>
  <el-form :inline="true">
    <el-form-item label="填报时间">
      <el-date-picker format="YYYY-MM-DD"
                      v-model="request.fillDate" value-format="YYYY-MM-DD" type="date"
                      placeholder="请选择填报时间"/>
    </el-form-item>
    <el-form-item>
      <el-switch v-model="request.type" active-text="我的" inactive-text="全部" :active-value="2" :inactive-value="1"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search" icon="Search">搜索</el-button>
      <el-button type="primary" @click="add" icon="CirclePlus">新增日报</el-button>
      <el-button type="primary" @click="exportFile" icon="Download">导出日报</el-button>
      <el-button type="primary" @click="show.showStatisticsDailyList=true" icon="DocumentAdd">统计日报</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="state.list" border height="calc(100% - 96px)">
    <el-table-column prop="createdName" label="填报人" width="100"/>
    <el-table-column prop="fillDate" label="填报日期" width="100"/>
    <el-table-column label="填报项目">
      <template #default="scope">
        <p>{{ scope.row.projectNames }}</p>
      </template>
    </el-table-column>
    <el-table-column label="填报内容">
      <template #default="scope">
        <p v-html="scope.row.content"></p>
      </template>
    </el-table-column>
    <el-table-column prop="createdTime" label="创建时间"></el-table-column>
    <el-table-column prop="updatedName" label="更新人"></el-table-column>
    <el-table-column prop="updatedTime" label="更新时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="warning" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteDaily(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background :total="state.total" layout="total,sizes,jumper,prev,pager,next" class="commonPage"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  <daily-report-info v-model="show.showDailyReportInfo" @save.once="save"
                     v-if="show.showDailyReportInfo" :type="state.type" :id="state.id"
                     :title="state.title"></daily-report-info>
  <statistics-daily-list v-model="show.showStatisticsDailyList"
                         v-if="show.showStatisticsDailyList"></statistics-daily-list>
</template>

<script>
import { onBeforeMount, reactive, ref } from 'vue'
import DailyReportInfo from '@/views/reportManage/components/dailyReportInfo'
import { deleteDailyByIdUrl, exportDailyUrl, queryDailyListUrl } from '@/api/api'
import { commonPostDownloadFile, post } from '@/utils/httpRequest'
import { ElMessage, ElMessageBox } from 'element-plus'
import StatisticsDailyList from '@/views/reportManage/components/statisticsDailyList'

export default {
  name: 'dailyReport',
  components: {
    StatisticsDailyList,
    DailyReportInfo
  },
  setup () {
    const show = reactive({
      showDailyReportInfo: false,
      showStatisticsDailyList: false
    })
    const search = () => {
      queryDailyListAsync()
    }
    const request = ref({
      pageNum: 1,
      pageSize: 10,
      fillDate: null,
      type: 2
    })
    const handleCurrentChange = (value) => {
      request.value.pageNum = value
      queryDailyListAsync()
    }
    const exportFile = async () => {
      await commonPostDownloadFile(exportDailyUrl, request.value)
    }
    const handleSizeChange = (value) => {
      request.value.pageSize = value
      queryDailyListAsync()
    }
    const state = ref({
      list: [],
      total: 0,
      type: 1,
      id: 0,
      title: ''
    })
    const deleteDaily = (data) => {
      ElMessageBox.confirm('确定删除该日报？', '删除日报提示', { type: 'warning' }).then(async () => {
        const result = await post(deleteDailyByIdUrl, { id: data.id })
        if (result.code === 200) {
          ElMessage.success('删除成功！')
          await queryDailyListAsync()
        }
      })
    }
    const save = async () => {
      await queryDailyListAsync()
    }
    const queryDailyListAsync = async () => {
      const result = await post(queryDailyListUrl, request.value)
      if (result.code === 200) {
        state.value.list = result.data.records
        state.value.total = result.data.total
      }
    }
    const add = () => {
      state.value.id = 0
      state.value.type = 1
      state.value.title = '添加日报'
      show.showDailyReportInfo = true
    }
    const edit = (data) => {
      state.value.id = data.id
      state.value.type = 2
      state.value.title = '编辑日报'
      show.showDailyReportInfo = true
    }
    onBeforeMount(() => {
      queryDailyListAsync()
    })
    return {
      exportFile,
      search,
      request,
      handleCurrentChange,
      handleSizeChange,
      edit,
      deleteDaily,
      save,
      state,
      add,
      show
    }
  }
}
</script>

<style scoped>

</style>
